<!-- 定位组件重写 -->
<template>
	<view class="locationBox2">
		<!-- 	<uni-data-select ref="uniSelect" v-model="value" :localdata="range" @change="change" :clear="false"
			emptyText="获取定位"></uni-data-select> -->

		<view class="select" @click="setPopShow">
			<text class="text">{{valueShow(value)}}</text>
			<u-icon :name="popShow ? 'arrow-down' : 'arrow-right'" color="#EC606F" size="28rpx"></u-icon>
		</view>

		<!-- 弹出选择select -->
		<uni-popup ref="popup" type="bottom" >
			<view class="popContent">
				<view class="popTitle">
					<text>选择城市：</text>
					<text class="popTitle-text">{{valueShow(value)}}</text>
				</view>

				<view class="popList">
					<view :class="{
						'popItem':true,
						'popItem2':value===res.value
						}" v-for="res in range" @click="change(res.value)">
						{{res.name}}
					</view>
				</view>

			</view>
		</uni-popup>


		<view class="locationBox-posithon" v-if="show !== '' && show">
			<view class="left">
				<uni-icons type="location" size="24rpx" color="#fff"></uni-icons>
				<text class="text">定位显示你在“{{addressData.data.name}}”</text>
			</view>

			<view class="button" @click="switchCity">
				切换到{{addressData.data.name}}
			</view>

			<view class="locationBox-posithon-child"></view>
		</view>

	</view>
</template>

<script>
	// vuex引入
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	// api请求
	import {
		getAreaCityApi, // 获取当前城市
	} from '@/api/user.js'






	export default {
		name: "locationBox",
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				value: 0, // 选择数据
				range: [], // 下拉框数据

				popShow: false, // 选择弹窗


				// 当前经纬度和城市
				addressData: {
					cityCode: "", //城市编码
					userLat: "",
					userLng: "",
					data: {}
				},

				show: '', // 是否显示弹窗

			};
		},
		computed: {
			...mapGetters(['locationInfo', 'locationAreaList', 'AreaList']),
			...mapState({
				addressShow: state => state.home.addressShow
			}),

			// 计算应该显示哪个城市
			valueShow() {
				return (val) => {
					let str = ''
					this.range.map(res => {
						if (res.value === this.value) {
							str = res.name
						}
					})

					return str;
				}
			}
		},
		created() {

			this.init()
			this.show = this.addressShow

		},

		watch: {

			/**
			 * 监视城市列表数据，如果有了就初始化
			 */
			locationAreaList: {
				handler(val) {
					// 放入下拉数据
					if (this.range.length < 1 && this.locationAreaList.length > 0) {
						this.range = [...this.locationAreaList]

						console.log(this.range, 'kkk');

						// 设置默认值
						if (this.locationInfo.cityCode) {
							this.change(this.locationInfo.cityCode)
						} else {
							this.locationAreaList.length > 0 && this.change(this.range[0].value)
						}

					}
				},
				deep: true,
				immediate: true
			},

			/**
			 * 当城市变化则修改显示城市
			 */
			locationInfo: {
				handler(val) {
					if (this.locationInfo.cityCode) {
						this.value = this.locationInfo.cityCode
					}

					if (this.locationInfo.cityCode === this.addressData.cityCode) {
						this.show = false
					}

				},
				deep: true,
				immediate: true
			},

			/**
			 * 将show提交到vuex
			 */
			show() {
				if (this.show !== "") {
					this.setAddressShow(this.show) // 存入vuex
				}

			},


			/**
			 * 试试监视vuex的数据
			 */
			addressShow() {
				if (this.addressShow !== "") {
					this.show = this.addressShow
				}
			}



		},


		methods: {
			...mapMutations(['setLocationInfo']),
			...mapMutations('home', ['setAddressShow']),

			/**
			 * 初始化
			 */
			init(val) {
				// 获取当前城市
				this.getAreaCity()
			},

			/**
			 * 获取当前城市
			 */
			async getAreaCity() {
				let that = this


				// 获取当前定位

				let location = await new Promise(function(resolve, reject) {
					uni.getLocation({
						success: ({
							latitude,
							longitude
						}) => {
							console.log('uni定位成功', latitude, longitude);
							// 成功
							resolve({
								latitude,
								longitude
							})
						},
						fail: err => {
							console.log(err, 'uni定位错误');
							// 失败
							reject(err);
						},
						complete: res => {
							console.log(res, '22222222');
						}
					})

				});



				// 打个锚点
				// let location = {
				// 	latitude: 39.91139 ,
				// 	longitude: 116.40024
				// }

				// 获取当前城市
				const res = await getAreaCityApi({
					location: `${location.latitude},${location.longitude}`
				})


				if (res.code !== 200) {
					this.$public.showText(res.msg || '请求失败')
					return
				}

				// 当前城市和经纬度
				this.addressData = {
					cityCode: res.data?.code,
					userLat: location.latitude,
					userLng: location.longitude,
					data: res.data
				}

				if (this.locationInfo.userLat === '' && this.locationInfo.userLng === '') {
					// 经纬度存入本地
					this.setLocationInfo({
						userLat: location.latitude,
						userLng: location.longitude,
					})
				}


				// 判断当前位置是否在其他城市
				this.compareLocation()

			},

			/**
			 * 比较位置
			 */
			compareLocation() {

				// 如果不是空，说明之前有组件已经做过判断了，所以就不运行了
				if (this.show !== "") {
					return
				}

				// 是否存在于服务列表中
				let status = false
				if (this.AreaList.length > 0) {
					this.AreaList.map(res => {
						if (this.addressData.cityCode === res.code) {
							status = true
						}
					})
				}

				// 所处城市和选择城市不一致就会显示
				if (this.addressData.cityCode !== this.locationInfo.cityCode && status) {

					this.show = true

					// 如果十秒后还没点击那就取消显示
					setTimeout(() => {
						if (this.show) {
							this.show = false
						}
					}, 10000)
				}
			},

			/**
			 * 切换当前城市
			 */
			switchCity() {
				this.range.map(res => {
					if (res.code === this.addressData.data.code) {
						// 修改本地经纬度和城市
						this.setLocationInfo({
							userLat: this.addressData.userLat,
							userLng: this.addressData.userLng,
							cityCode: this.addressData.cityCode,
						})

						this.value = this.addressData.cityCode
						this.show = false
					}
				})
			},


			/**
			 * 修改选项
			 */
			change(e) {
				this.value = e

				// 切换城市后自动取消弹窗
				this.show = false

				// 更改选择后关闭选项弹窗
				this.closePopShow()

				this.setLocationInfo({
					cityCode: e
				})

			},


			/**
			 * 打开选项弹窗
			 */
			setPopShow() {
				this.popShow = true
				this.$refs.popup.open('top')
			},

			/**
			 * 关闭选项弹窗
			 */
			closePopShow() {
				this.popShow = false

				// 更改选择后关闭选项弹窗
				this.$nextTick(() => {
					this.$refs.popup.close()
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .uni-select {
		border: none;
		padding: 0 !important;
	}

	/deep/ .uni-icons.uniui-bottom {
		color: #EC606F !important;
	}

	/deep/ .uni-icons.uniui-top {
		color: #EC606F !important;
	}

	/deep/ .uni-select__input-text {
		#font(28rpx, #0f0f0f, 700);
		margin-right: 8rpx;
	}

	/deep/ .uni-select__selector {
		width: 400rpx;
	}


	.locationBox2 {
		.select {
			#font(28rpx, #0f0f0f, 700, '思源黑体');
			#flex(-, -, center);

			.text {
				margin-right: 8rpx;
			}
		}




		.popContent {
			#padding(48rpx 24rpx 80rpx 24rpx);
			background-color: #fff;

			.popTitle {
				background-color: #fff;
				#font(28rpx, #666);
				margin-bottom: 36rpx;

				.popTitle-text {
					#font(28rpx, #333);
				}
			}

			.popList {
				#flex(-, -, center);
				gap: 24rpx;
				flex-wrap: wrap;

				.popItem {
					#box(140rpx, 64rpx, 8rpx, #fff);
					#flex(-, center, center);
					#font(26rpx, #333);
					border: 2rpx solid #eee;
				}

				.popItem2 {
					border-color: #EC606F;
					color: #EC606F;
				}
			}


		}


		.locationBox-posithon {
			position: fixed;
			top: 70rpx;
			left: 50%;
			width: 686rpx;
			margin-left: -343rpx;
			background-color: rgba(#000, .2);
			z-index: 1000;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 16rpx 36rpx;
			color: #fff;
			font-size: 24rpx;
			font-weight: 400;

			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					margin-left: 12rpx;
				}

			}

			.button {
				font-size: 22rpx;
				box-sizing: border-box;
				padding: 8rpx;
				border-radius: 4rpx;
				background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
			}


			.locationBox-posithon-child {
				position: absolute;
				left: 60rpx;
				top: -24rpx;
				border-left: 12rpx solid rgba(#000, 0);
				border-top: 12rpx solid rgba(#000, 0);
				border-right: 12rpx solid rgba(#000, 0);
				border-bottom: 12rpx solid rgba(#000, 0.2);


			}
		}
	}
</style>